回顧一下，昨天有分析登入頁會有4個子頁:

• 輸入帳號
• 選擇帳號
• 輸入密碼
• 驗證身分

後面幾天會分別來把四個子頁的畫面做出來~那我們就開始吧!!

#輸入帳號開發

參考Google的輸入帳號，要做的和它相去不遠!!

接著就開啟 /components/KeyinUser.vue 開始摟~

#Step 1

輸入帳號頁面屬於表單，所以我們會用到Vuetify-Forms表單組件來處理
首先在 template 裡面包上最外層的 v-from:

<template>
  <v-form ref="form">
  </v-form>
</template>

• v-from
  • ref: 識別組件的屬性，可透過 this.$refs.ref值 的方式來對應
    不過今天不會用到它，先寫起來放xD

#Step 2

表單內加上輸入帳號的文字輸入框:

<v-form ref="form">
  <v-card-text>
    <v-text-field
      label="輸入您的帳號"
      type="text"
      class="font-weight-bold"
      outlined
      clearable
    ></v-text-field>
  </v-card-text>
</v-form>

• v-card-text: 卡片文字內容
• v-text-field: Vuetify-Text Fields 文本框組件
  • label: 文字框的標題
  • type: 文字框的輸入類型
  • outlined: 有邊框的文字框外觀
  • clearable: 清除按鈕及功能

效果如下:

#Step 3

想像一下，若帳號密碼等資訊放在不同頁的話，資料傳遞溝通會很困難
於是這裡設計將表單資訊都存放在父層 Login.vue 的data中，溝通時使用 props 方式傳入，子層則使用 $emit 來回寫資料

這樣寫既可以保持數據的流向，出錯時也較好查詢原因，日後維護會方便許多

接著開啟 /views/Login.vue 在data裡面加上需要的表單資料吧!!

data() {
  return {
    ...,
    user: {
      username: "", 
      accountId: "", 
      password: "", 
    },
  };
},

• username: 姓名
• accountId: 帳號
• password: 密碼

註: 姓名的部分會在驗證帳號後由伺服器回傳，這邊先寫起來放

#Step 4

再來會用到一個神奇的後綴語法 - .sync

• .sync: 資料傳遞的語法糖
  本質一樣是父傳子，子層用 $emit 通知父層做資料改變，但它的好處是直接幫助我們省去了在父層多寫1個事件及 v-on:update 監聽
  參考Vue-.sync 修飾符或是估狗大神xD

接著在將帳號傳入時加上它:

<router-view :account-id.sync="user.accountId"></router-view>

回到 /components/KeyinUser.vue 用 props 接收

export default {
  name: "KeyinUser",
  props: ["accountId"],
};

寫一個 computed 來計算要對應的帳號綁定資料
其中內容有 get() 方法與 set() 方法

• get(): 得到props傳入的帳號
• set(value): 使用 $emit 方法將值送回父層更新

computed: {
  myAccountId: {
    get() {
      return this.accountId;
    },
    set(value) {
      this.$emit("update:accountId", value);
    },
  },
},

最後用 v-model 指令綁定文字框組件:

<v-card-text>
  <v-text-field
    v-model="myAccountId"
  ></v-text-field>
</v-card-text>

這樣就完成了帳號的雙向綁定溝通囉~

#Step 5

再來要做個簡單的驗證，加上這兩個驗證規則，參考Vuetify-Forms 創建規則:

• 必填
• 欄位長度限制

在文字框加上 v-bind:對應規則:

<v-text-field
  ...
  :rules="usernameRules"
></v-text-field>

對應規則用陣列的方式寫在data裡面，規則的寫法為: 判斷||判斷不成立要呈現的訊息
第一個規則的情境就是「必須輸入帳號否則顯示"請輸入帳號"」

data() {
  return {
    usernameRules: [
      (v) => !!v || "請輸入帳號", 
    ],
  };
},

第二個規則的情境就是「必須有輸入且輸入值長度小於規定否則顯示"最多10碼"」:

data() {
  return {
    usernameLength: 10,
    usernameRules: [
      (v) => !!v || "請輸入帳號",
      (v) => (v && v.length <= this.usernameLength) || "最多10碼",
    ],
  };
}

順便加上 counter 屬性讓文字框呈現長度規則，使用者體驗會好一點點:

<v-text-field
  ...
  :counter="usernameLength"
></v-text-field>

效果如下:

#Step 6

最後加上 [繼續] 按鈕就可以結束這回合!!

<v-form ...>
  <v-card-actions>
    <v-spacer></v-spacer>
    <v-btn color="primary" class="mr-2">繼續</v-btn>
  </v-card-actions>
</v-form>

• v-card-actions: 放卡片的 動作 的容器，例如按鈕

來看看最後完成的效果吧~

今日重點:

• 帳號密碼放在父層 Login.vue，並使用 .sync 及 $emit 做父子層雙向溝通
• 文字框驗證使用 v-bind:rules="驗證規則"，驗證規則放在data中類型為 陣列
• 驗證規則寫法為: 判斷||若判斷不成立要呈現的訊息
• Vuetify 組件的API查詢及使用
  • Vuetify-Forms: 表單組件
  • Vuetify-Text Fields: 文本框組件

有些觀念可能很難懂，如果我有講不清楚或不完整請提出來~

有需要改進或是任何意見建議歡迎下面留言~